<template>
  <div class="carousel-container">
    <el-carousel :interval="3000" arrow="always" type="card" class="carousel">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img :src="image.imageUrl" class="carousel-image" :alt="images.title" @click="handleClick(image)"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive} from 'vue';
import {getFoodArticleDetail, getFoodHomeList} from "@/api/food.js";
import router from "@/router/index.js";

const images = ref([]);


const getFoodList = () => {
  getFoodHomeList().then(res => {
    images.value = res.data;
    console.log(images.value);
  });
}

onMounted(() => {
  getFoodList();
});

const handleClick = (image) => {
  getFoodArticleDetail(image.id).then(res => {
    router.push({name: "article", params: {id: image.id}})
  });
}


</script>

<style scoped>
.carousel-container {
  max-width: 800px; /* 设置最大宽度 */
  margin: auto; /* 自动水平居中 */
}

.carousel-image {
  width: 100%; /* 图片宽度 */
  height: 400px; /* 固定高度 */
  object-fit: cover; /* 保持图片比例，并裁剪超出部分 */
}
</style>
